<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="../libs/vue.js"></script>
    <script src="../libs/vue-router.js"></script>

    <link rel="stylesheet" href="../libs/animate.css">
    <!-- jquery  -->
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>  
    <style>
        .box{
            width:400px;
            height: 400px;
            border:1px solid darkgoldenrod;
            border-radius: 10px;
            overflow: auto;
            padding: 10px;
        }
        table{
            border:1px solid #999;
            background: deeppink;
            color:#fff;
        }
        tr td{
            border:1px solid #999;
            padding:10px;
        }
        ul{
            background: darkgoldenrod;
            width:40%;
        }
        .zoom-enter-active{
            animation: zoomInDown 1s;
        }
        .zoom-leave-active{
            animation: zoomOutDown 1s;
        }
        .slot{
            width:50%;
            margin-top: 20px;
            border: 1px solid darkmagenta;
            border-radius: 10px;
            padding:30px;
        }
        .router-link-exact-active ,.router-link-active {
            padding:5px;
            border-radius: 5px;
            background: darkorange;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>  {{title }} </h2>
        <m-head></m-head>
        <hr>
        <h2>路由Demo</h2>
        <div class="box">
            <!-- 5. 路由出口  告诉vue 在哪里加载路由组件  -->       
            <router-view></router-view>
        </div>

        <div>
            <!-- 6. 路由导航  路由跳转   -->
            
        </div>
    </div>

    <template id="myapp">
        <div>
            <h2>App - 微信的主路由</h2>
            <router-view></router-view>
            <hr>
            <Foot/>
        </div>
    </template>
    <template id="wechat">
        <div>
            <h2>wechat - 微信聊天 </h2>
        </div>
    </template>
    <template id="contact">
        <div>
            <h2>contact - 通讯录</h2>
            <div>
                <p v-for="(l,i) in list" :key="i">
                    <router-link :to="{name:'detail',query:l}" >{{l.name}}</router-link>
                </p>
            </div>
        </div>
    </template>
    <template id="find">
        <div>
            <h2>find - 发现</h2>
        </div>
    </template>
    <template id="mine">
        <div>
            <h2>mine - 个人中心</h2>
        </div>
    </template>

    <template id="foot">
        <footer>
            <router-link v-for="(l,i) in foots" :key="i" :to="{name:l.name}">
                {{l.text}}
            </router-link>
        </footer>
    </template>

    <template id="detail">
        <div>
            <h2>歌手详情 - detail </h2>
            <h2>id == {{$route.query.id}}</h2>
            <h2>name --- {{$route.query.name }}</h2>
            <img width="300" height="300" :src="$route.query.picUrl" alt="">
            <button @click="$router.back() ">点击返回</button>
        </div>
    </template>

    <script>
        Vue.component("mHead",{
            template:"<header>Head - Head - wh2116daydayup </header>"
        })

        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

        // 1. 定义 (路由) 组件。
        const App = {
            template:"#myapp"
        }
        const Wechat = {
            template:"#wechat"
        }
        const Contact = {
            template:"#contact",
            data(){
                return {
                    list:[]
                }
            },
            mounted(){
                $.ajax({
                    url:"http://47.104.209.44:3333/artist/list",
                    type:"GET",
                    success:res=>{
                        console.log(res)
                        this.list = res.artists 
                    }
                })
            }
        }
        const Find = {
            template:"#find",
            beforeRouteEnter(to,from,next){
                console.log("进入组件时候 beforeRouteEnter")
                next()
            },
            beforeRouteUpdate(to,from,next){
                console.log("beforeRouteUpdate - 路由的数据更新时候")
                next()
            },
            beforeRouteLeave(to,from,next){
                console.log('离开当前路由时候 - beforeRouteLeave')
                alert('你真的要离开吗')
                next()
            }
        }
        const Mine = {
            template:"#mine"
        }
        const Foot = {
            template:"#foot",
            data(){
                return {
                    foots:[
                        {path:"wechat",name:'wechat',text:"微信",icon:""},
                        {path:"contact",name:'contact',text:"通讯录",icon:""},
                        {path:"find",name:'find',text:"发现",icon:""},
                        {path:"mine",name:'mine',text:"我的",icon:""},
                    ]
                }
            }
        }
        Vue.component("Foot",Foot)

        const Detail = {
            template:"#detail"
        }
        // 2. 定义路由
        // 每个路由应该映射一个组件。 其中"component" 可以是
        // 通过 Vue.extend() 创建的组件构造器，
        const routes = [
            {
                path:"/",
                redirect:{name:'app'}
            },
            { 
                path:"/app",
                name:'app',
                component:App,
                redirect:"/app/wechat",
                children:[
                    {path:"wechat",name:'wechat',component:Wechat},
                    {path:"contact",name:'contact',component:Contact,
                        beforeEnter(to,from,next){
                            if(window.confirm("你真的要进入通讯录吗?")){
                                next()
                            }else{
                                next(false)
                            }
                        }
                    },
                    {path:"find",name:'find',component:Find},
                    {path:"mine",name:'mine',component:Mine},
                ]
            },
            {
                path:"/detail",
                name:'detail',
                component:Detail
            },
            {
                path:"/404",
                component:{
                    template:"<h2>404 - 404 - notFOund </h2>"
                }
            },
            {
                path:"*",
                redirect:{name:'app'}
            }
        ]


        // 3. 创建路由对象 然后传 `routes` 配置
        const router = new VueRouter({
            routes,
            mode:"hash",
            base:"",
            scrollBehavior(to,from,savePosition){
                return 0;
            }
        })

        // 全局守卫
        router.beforeEach((to,from,next)=>{
            console.log('全局路由前置守卫  - 进入路由之前触发的 ')
            next()
        })

        // 已经进入这个路由了 
        router.afterEach((to,from)=>{
            console.log('afterEach 已经进入当前路由了 - '+ to.name )
        })

        // 4. 挂载全局的根实例对象 
        const vm = new Vue({
            router,  // this.$router 
            data:{
                title:"Vue 路由守卫  ",
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title 
                console.log(this.$router)  // 全局的路由对象 负责路由跳转 路由显示 
                console.log(this.$route)   // 当前激活的路由信息  可以获取相关的路由参数的  
            }
        }).$mount("#app")
    </script>
     <!-- 
        嵌套路由  路由嵌套组件  
        你有多少层嵌套就写多少个 router-view     

        配置简单 路由     

        路由守卫   阻止你进入或者离开当前路由 

        用来判断时候可以进入或者离开当前路由  

        路由导航守卫    分三种   
        a.  全局前置守卫  router.beforeEach(to,from,next)
            全局后置守卫  router.afterEach(to,from)

        b.  路由独享的守卫  beforeEnter(to,from,next)  进入当前路由之前触发 

        c.  路由组件内直接定义以下路由导航守卫  component
            beforeRouteEnter    进入这个组件之前
            beforeRouteUpdate   组件数据更新  
            beforeRouteLeave    离开这个组件之前  
     -->

</body>
</html>


